<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue6</title>
		<style type="text/css">
			/* .div1{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 0;
			} */
		</style>
	</head>
	<body>
		<div id="demo1">
			<div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
			<div v-drag :style="{width:'100px', height:'100px', background:'red',  position:'absolute', left:0,  top:0}"></div>
			</div>
	</body>
</html>
<script src="js/vue.js"></script>
<script type="text/javascript">
	// ev.x,ev.y  当前鼠标的坐标
	// 找到当前鼠标的距离
	Vue.directive('drag',function(el){
		el.onmousedown=function(ev){
			var divX=ev.clientX-el.offsetLeft;
			var divY=ev.clientY-el.offsetTop;
			
			// vue_test.html	
			el.style.left=divX+'px';
			el.style.top=divY+'px';
			
		}
	});
	
	var v1=new Vue({
		el:"#demo1",
		data:{
			
		}
	});
	
	
</script>